<template>
  <div class="accountManagement">
    <Header />
    <div class="image">
      <div class="image-wrap">
        <img src="../../assets/image/fast-reg.png" alt="" />
        <div></div>
      </div>
    </div>
    <!-- <p>用户管理</p> -->
    <div class="accuont-table">
      <el-tabs type="border-card">
        <el-tab-pane label="用户管理">
          <el-table
            :data="userData"
            border
            style="width: 100%"
            max-height="400"
            
          >
            <el-table-column
              prop="uid"
              label="用户id"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="uname"
              label="姓名"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="uphone"
              label="电话"
              width="150"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="umailbox"
              label="邮箱"
              width="200"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="uregisterdate"
              label="注册日期"
              width="150"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="ulevel"
              label="权限等级"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="ustatus"
              label="账号状态"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              fixed="right"
              label="账号审核"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  @click="getRefuseUser(scope.row)"
                  type="text"
                  size="small"
                  v-if="refuseDisabledUser[scope.$index] === true"
                  >拒绝</el-button
                >
                <el-button
                  @click="getRefuseUser(scope.row)"
                  type="text"
                  size="small"
                  disabled
                  v-if="refuseDisabledUser[scope.$index] === false"
                  >拒绝</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="passDisabledUser[scope.$index] === true"
                  @click="getPassUser(scope.row)"
                  >通过</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  disabled
                  v-if="passDisabledUser[scope.$index] === false"
                  @click="getPassUser(scope.row)"
                  >通过</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  @click="getDeleteUser(scope.row)"
                  type="text"
                  size="small"
                  >删除</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="getEditUser(scope.row, scope.$index)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="企业管理">
          <el-table
            :data="companyData"
            border
            style="width: 100%"
            max-height="400"
          >
            <el-table-column
              prop="cid"
              label="企业id"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="cname"
              label="企业名称"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="cphone"
              label="企业电话"
              width="150"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="cmailbox"
              label="企业邮箱"
              width="200"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="cregisterdate"
              label="注册日期"
              width="150"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="clevel"
              label="权限等级"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="cstatus"
              label="账号状态"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              fixed="right"
              label="账号审核"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  @click="getRefuseCompany(scope.row)"
                  type="text"
                  size="small"
                  v-if="refuseDisabledCompany[scope.$index] === true"
                  >拒绝</el-button
                >
                <el-button
                  @click="getRefuseCompany(scope.row)"
                  type="text"
                  size="small"
                  disabled
                  v-if="refuseDisabledCompany[scope.$index] === false"
                  >拒绝</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="passDisabledCompany[scope.$index] === true"
                  @click="getPassCompany(scope.row)"
                  >通过</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  disabled
                  v-if="passDisabledCompany[scope.$index] === false"
                  @click="getPassCompany(scope.row)"
                  >通过</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  @click="getDeleteCompany(scope.row)"
                  type="text"
                  size="small"
                  >删除</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="getEditCompany(scope.row, scope.$index)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 用户编辑框 -->
    <el-dialog
      title="用户信息编辑"
      :visible.sync="dialogVisibleUser"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-position="center" label-width="80px" >
      <el-form-item label="用户名">
        <el-input v-model="userEditData.uname"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="userEditData.uphone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userEditData.umailbox"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleUser = false">取 消</el-button>
        <el-button type="primary" @click="userEditConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 企业编辑框 -->
    <el-dialog
      title="企业信息编辑"
      :visible.sync="dialogVisibleCompany"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-position="center" label-width="80px" >
      <el-form-item label="用户名">
        <el-input v-model="companyEditData.cname"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="companyEditData.cphone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="companyEditData.cmailbox"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleCompany = false">取 消</el-button>
        <el-button type="primary" @click="companyEditConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Header from '../../components/Header/index'
export default {
  name: 'accountManagement',
  components: {
    Header,
  },
  data() {
    return {
      userRes: [], // 浅拷贝的用户信息
      userData: [], // 深拷贝的用户信息
      companyRes: [], // 浅拷贝的企业信息
      companyData: [], // 深拷贝的企业信息
      dialogVisibleUser: false, // 用户编辑弹窗
      dialogVisibleCompany: false, // 企业编辑弹窗
      editIndex: '', // 当前行的索引
      userEditData: {}, // 用户编辑弹窗的输入框
      companyEditData: {}, // 企业编辑弹窗的输入框
      disabledUser: false,
      refuseDisabledUser: [],
      passDisabledUser: [],
      refuseDisabledCompany: [],
      passDisabledCompany: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getUserData()
    this.getCompanyData()
  },
  mounted() {},
  methods: {
    // 用户信息
    getUserData() {
      this.$request.get('/api/api/UserInfo/GetInfo').then((res) => {
        // console.log(res)
        this.userRes = res.data.reverse()
        // 深度拷贝
        let userRes = JSON.parse(JSON.stringify(res.data))
        // console.log(userRes);
        for (let i = 0; i < userRes.length; i++) {
          if (userRes[i].ustatus === 1) {
            userRes[i].ustatus = '已通过'
            this.refuseDisabledUser[i] = true
            this.passDisabledUser[i] = false
          }
          if (userRes[i].ustatus === 2) {
            userRes[i].ustatus = '审核中'
            this.refuseDisabledUser[i] = true
            this.passDisabledUser[i] = true
          }
          if (userRes[i].ustatus === 0) {
            userRes[i].ustatus = '已拒绝'
            this.refuseDisabledUser[i] = false
            this.passDisabledUser[i] = true
          }
        }
        this.userData = userRes
      })
    },
    // 用户审核拒绝按钮
    getRefuseUser(row) {
      // console.log(row, '拒绝')
      const data = {
        uid: row.uid,
        uname: row.uname,
        upassword: row.upassword,
        uphone: row.uphone,
        umailbox: row.umailbox,
        ustatus: 0,
      }
      this.$request.post('/api/api/UserInfo/Update', data).then((res) => {
        // console.log(res)
        this.getUserData()
      })
    },
    // 用户审核通过按钮
    getPassUser(row) {
      // console.log(row, '通过')
      const data = {
        uid: row.uid,
        uname: row.uname,
        upassword: row.upassword,
        uphone: row.uphone,
        umailbox: row.umailbox,
        ustatus: 1,
      }
      this.$request.post('/api/api/UserInfo/Update', data).then((res) => {
        // console.log(res)
        this.getUserData()
      })
    },
    // 用户管理操作删除按钮
    getDeleteUser(row) {
      // console.log(row, '删除')
      const data = {
        uid: row.uid,
      }
      this.$request.post('/api/api/UserInfo/Del', data).then((res) => {
        // console.log(res)
        this.getUserData()
      })
    },
    // 用户管理操作编辑按钮
    getEditUser(row, index) {
      // console.log(index, row, '编辑')
      // this.userEditData = row
      // 编辑弹窗深拷贝当前行用户信息
      this.userEditData = JSON.parse(JSON.stringify(row))
      this.editIndex = index
      this.dialogVisibleUser = true
    },
    // 编辑弹窗确定按钮
    userEditConfirm() {
      this.dialogVisibleUser = false
      const data = {
        uid: this.userRes[this.editIndex].uid,
        uname: this.userEditData.uname,
        upassword: this.userRes[this.editIndex].upassword,
        uphone: this.userEditData.uphone,
        umailbox: this.userEditData.umailbox,
        ustatus: this.userRes[this.editIndex].ustatus,
      }
      // console.log(data);
      this.$request.post('/api/api/UserInfo/Update', data).then((res) => {
        // console.log(res)
        this.getUserData()
      })
    },
    // 编辑弹窗关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },

    // 企业信息
    getCompanyData() {
      this.$request.get('/api/api/ZpCompany/GetInfo').then((res) => {
        // console.log(res)
        this.companyRes = res.data.reverse()
        // 深度拷贝
        let companyRes = JSON.parse(JSON.stringify(res.data))
        // console.log(companyRes);
        for (let i = 0; i < companyRes.length; i++) {
          if (companyRes[i].cstatus === 1) {
            companyRes[i].cstatus = '已通过'
            this.refuseDisabledCompany[i] = true
            this.passDisabledCompany[i] = false
          }
          if (companyRes[i].cstatus === 2) {
            companyRes[i].cstatus = '审核中'
            this.refuseDisabledCompany[i] = true
            this.passDisabledCompany[i] = true
          }
          if (companyRes[i].cstatus === 0) {
            companyRes[i].cstatus = '已拒绝'
            this.refuseDisabledCompany[i] = false
            this.passDisabledCompany[i] = true
          }
        }
        this.companyData = companyRes
      })
    },
    // 企业审核拒绝按钮
    getRefuseCompany(row) {
      // console.log(row, '拒绝')
      const data = {
        cid: row.cid,
        cname: row.cname,
        cpassword: row.cpassword,
        cphone: row.cphone,
        cmailbox: row.cmailbox,
        caddress: row.caddress,
        caccount: row.caccount,
        cstatus: 0,
      }
      this.$request.post('/api/api/ZpCompany/Update', data).then((res) => {
        // console.log(res)
        this.getCompanyData()
      })
    },
    // 企业审核通过按钮
    getPassCompany(row) {
      // console.log(row, '通过')
      const data = {
        cid: row.cid,
        cname: row.cname,
        cpassword: row.cpassword,
        cphone: row.cphone,
        cmailbox: row.cmailbox,
        caddress: row.caddress,
        caccount: row.caccount,
        cstatus: 1,
      }
      this.$request.post('/api/api/ZpCompany/Update', data).then((res) => {
        // console.log(res)
        this.getCompanyData()
      })
    },
    // 企业管理操作删除按钮
    getDeleteCompany(row) {
      // console.log(row, '删除')
      const data = {
        cid: row.cid,
      }
      this.$request.post('/api/api/ZpCompany/Del', data).then((res) => {
        // console.log(res)
        this.getCompanyData()
      })
    },
    // 企业管理操作编辑按钮
    getEditCompany(row, index) {
      // console.log(index, row, '编辑')
      // 编辑弹窗深拷贝当前行企业信息
      this.companyEditData = JSON.parse(JSON.stringify(row))
      this.editIndex = index
      this.dialogVisibleCompany = true
    },
    // 编辑弹窗确定按钮
    companyEditConfirm() {
      this.dialogVisibleCompany = false
      const data = {
        uid: this.companyRes[this.editIndex].cid,
        uname: this.companyEditData.cname,
        upassword: this.companyRes[this.editIndex].cpassword,
        uphone: this.companyEditData.cphone,
        umailbox: this.companyEditData.cmailbox,
        ustatus: this.companyRes[this.editIndex].cstatus,
      }
      // console.log(data);
      this.$request.post('/api/api/ZpCompany/Update', data).then((res) => {
        // console.log(res)
        this.getCompanyData()
      })
    },
  },
}
</script>
<style scoped>
.accountManagement {
  width: 100%;
  height: 100%;
  background-color: #f6f6f8;
  padding-bottom: 20px;
}
.image {
  width: 100%;
  height: 120px;
  background-color: #5dd5cb;
}
.image-wrap {
  width: 1084px;
  margin: auto;
}
.image-wrap img {
  width: 354px;
  height: 120px;
}
.accountManagement p {
  text-align: center;
  margin: 50px 0;
  font-size: 20px;
}
.accuont-table {
  width: 1200px;
  margin: auto;
  margin-top: 50px;
  /* margin-bottom: 100px; */
}
</style>